<template>
  <div class="mb">
    <div>
      <van-swipe-cell v-for="i in noteList" :key="i.id">
        <template #left>
          <van-button square type="primary" text="切换状态" />
        </template>
        <van-cell :border="false" title="状态">
          <div :style="{ color: !i.flog ? 'red' : '' }">
            {{ i.flog ? "完成" : "未完成" }}
          </div>
        </van-cell>
        <template #right>
          <van-button square type="danger" text="删除" />
        </template>
        <van-field type="textarea" :value="i.text" disabled />
      </van-swipe-cell>
    </div>
    <div class="btn" @click="show = true">
      <van-icon name="add" />
    </div>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <van-field
          v-model="message"
          rows="4"
          autosize
          label="内容"
          type="textarea"
          maxlength="200"
          placeholder="请输入留言"
          show-word-limit
        />
        <van-button class="block" @click="add">新增</van-button>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      noteList: [],
      show: false,
      message: '',
      userName: ''
    }
  },
  created() {
    this.initMethod()
  },
  methods: {
    initMethod() {
      this.userName = this.$route.params.id
      const obj = { userName: this.userName }
      this.noteBook(obj).then((res) => {
        if (res.data.ok === 1) {
          this.noteList = res.data.data
        }
      })
    },
    add() {
      const message = this.message
      const userName = this.userName
      this.setNoteBook({
        userName,
        text: message
      }).then(res => {
        if (res.data.ok === 1) {
          this.$notify(res.data.data)
          this.show = false
          this.initMethod()
        }
      })
    },
    ...mapActions(['noteBook', 'setNoteBook'])
  }
}
</script>

<style lang="scss" scoped>
.btn {
  width: 40px;
  height: 30px;
  line-height: 30px;
  position: fixed;
  bottom: 60px;
  left: calc(50% - 20px);
  text-align: center;
  font-size: 28px;
  color: $tmColor;
  z-index: 99;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-wrap: wrap;
  align-content: center;
  padding: 0 30px;
  .block {
    width: 100%;
    height: 50px;
    background-color: #fff;
  }
}
</style>
